<template>
  <div class="flex1">
    <div class="_land_23vdq_1" v-if="tableData && tableData.length == 0">
      <main class="_land-container_23vdq_7">
        <div class="_land-img_23vdq_14" style="padding:20px;background:#eff5ff;border-radius: 20px;">
          <img
              src="/imgs/resume.jpg" alt=""
              >
        </div>
        <div class="_land-text_23vdq_11">
          <section>简历就业服务</section>
          <ul>
            <li>快速收集个人信息</li>
            <li>简历优化与指导：帮您快速建设简历</li>
            <li>你无需在关注简历问题，会针对个人进行定制</li>
            <li>赠送三个月平台VIP权限，畅享面试就业、设计模式相关课程</li>
          </ul>
          <button type="button" class="gda-btn gda-btn-primary"  @click="handleOpenResume"><span>填写简历信息</span>
            <svg role="img" aria-label="arrow-right-small" focusable="false" data-icon="arrow-right-small"
                 aria-hidden="true" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                 class="gdesign-icon gdesign-icon-arrow-right-small">
              <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M13.8797 12.0302L8.91003 16.9999L9.97069 18.0605L16.001 12.0302L9.97069 5.99989L8.91003 7.06055L13.8797 12.0302Z"
                    fill="currentColor"></path>
            </svg>
          </button>
        </div>
        <div class="_land-text_23vdq_11">
          <section>会员服务</section>
          <ul>
            <li>升级会员免费获取简历服务</li>
            <li>升级会员获取面试题题免费学习，设计模式免费学习</li>
            <li>项目实战课程优享折扣服务</li>
            <li>如果你已经是会员，会根据你选择服务进行叠加</li>
          </ul>
          <button v-if="userStore.viptype == 1" @click="handleOpenVip" type="button" class="gda-btn">
            <span>点击升级会员</span>
            <svg role="img" aria-label="arrow-right-small" focusable="false" data-icon="arrow-right-small"
                 aria-hidden="true" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                 class="gdesign-icon gdesign-icon-arrow-right-small">
              <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M13.8797 12.0302L8.91003 16.9999L9.97069 18.0605L16.001 12.0302L9.97069 5.99989L8.91003 7.06055L13.8797 12.0302Z"
                    fill="currentColor"></path>
            </svg>
          </button>
          <button v-else @click="handleOpenResume"  style="background:#d71f13;" type="button" class="gda-btn gda-btn-primary">
            <span>填写简历信息</span>
            <svg role="img" aria-label="arrow-right-small" focusable="false" data-icon="arrow-right-small"
                 aria-hidden="true" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                 class="gdesign-icon gdesign-icon-arrow-right-small">
              <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M13.8797 12.0302L8.91003 16.9999L9.97069 18.0605L16.001 12.0302L9.97069 5.99989L8.91003 7.06055L13.8797 12.0302Z"
                    fill="currentColor"></path>
            </svg>
          </button>
        </div>
        <div class="_land-img_23vdq_14 _land-img-reverse_23vdq_17" style="padding:20px;background:#eff5ff;border-radius: 20px;">
        <img src="/imgs/uvip.jpg" alt=""
             class="">
        </div>
        <div class="_land-img_23vdq_14" style="padding:20px;background:#eff5ff;border-radius: 20px;">
          <img src="/imgs/template.jpg" alt=""
               class="">
        </div>
        <div class="_land-text_23vdq_11">
          <section>精心规划安排面试题</section>
          <ul>
            <li>在简历服务中，你只需要耐心等待简历的生成</li>
            <li>后续海提供不同阶段面试题，你只需要静下来去看面试题</li>
          </ul>
          <button type="button"  @click="handleOpenResume" style="background: #efa983" class="gda-btn gda-btn-primary"><span>填写简历信息</span>
            <svg role="img" aria-label="arrow-right-small" focusable="false" data-icon="arrow-right-small"
                 aria-hidden="true" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                 class="gdesign-icon gdesign-icon-arrow-right-small">
              <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M13.8797 12.0302L8.91003 16.9999L9.97069 18.0605L16.001 12.0302L9.97069 5.99989L8.91003 7.06055L13.8797 12.0302Z"
                    fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </main>
    </div>
    <div class="gui-padding" v-else>
      <div>
        <table class="k-data-table-table w100" style="table-layout: auto;">
          <thead class="n-data-table-thead">
          <tr class="n-data-table-tr">
            <th colspan="1" rowspan="1" data-col-key="id" class="n-data-table-th">
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">编号</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">标题</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">手机</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">微信</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">是否就业</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">交易方式</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">交易号</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">创建时间</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">操作</div>
              </div>
            </th>
          </tr>
          </thead>
          <tbody class="n-data-table-tbody">
          <template v-for="(item) in tableData">
            <tr class="n-data-table-tr">
              <td> {{ item.id }}</td>
              <td>{{ item.title }}</td>
              <td>{{item.telephone}}</td>
              <td>{{item.weixincode}}</td>
              <td>{{item.isJob==1?"已就业":"待就业"}}</td>
              <td>
                {{ item.payMethod }}
              </td>
              <td>{{ item.tradeNo }}
              </td>
              <td>
                {{ formatTimeToStr(item.createTime) }}
              </td>
              <td colspan="1" rowspan="1" data-col-key="operator"
                  class="n-data-table-td n-data-table-td--last-col n-data-table-td--last-row">
                <div class="flex align-center">
                 <div class="mr10">
                   <span v-if="item.status==1">准备中</span>
                   <span v-if="item.status==2">制作中</span>
                   <span v-if="item.status==3">已完成</span>
                   <span v-if="item.status==4">已就业</span>
                 </div>
                  <div>
                    <n-button @click="item.expand = !item.expand" class="ml5"
                              type="info">查看进度
                    </n-button>
                  </div>
                  <div>
                    <n-button @click="handleDownload(item)" v-if="item.status >= 3" class="ml5"
                              type="success">下载简历
                    </n-button>
                  </div>
                  <div>
                    <n-button v-if="item.status == 1" @click="handleOpenPayDiaolog(item)" class="ml5" type="warning">
                      支付小费
                    </n-button>
                  </div>
                  <div>
                    <n-button @click="handleUpdateStatus(item,2)" v-if="userStore.teacherFlag == 1 && item.status > 1"
                              class="ml5" type="error">制作中
                    </n-button>
                  </div>
                  <div class="pr tp4">
                    <ksd-uploader-text @success="handleUploadSucess(item)" v-model="item.resumeNewFile" accept="application/vnd.ms-works,application/pdf,application/msword"
                                       v-if="userStore.teacherFlag == 1 && item.status == 2">
                      <n-button class="ml5" type="info">上传简历</n-button>
                    </ksd-uploader-text>
                  </div>
                  <div>
                    <n-button @click="handleUpdateStatus(item,4)" v-if="userStore.teacherFlag == 1  && item.status > 1"
                              class="ml5" type="primary">已就业
                    </n-button>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="10">
                描述：{{item.description}}
              </td>
            </tr>
            <tr v-if="item.expand">
              <td colspan="10">
                <div class="mt20 flex justify-center align-center mainbg7" style="padding: 40px 0">
                  <div class="mr20 c999">
                    <a href="https://ksd-social.oss-cn-shenzhen.aliyuncs.com/notes/a5db42480b6e91fd9cf54519543d5dbd/9d4f7be5c2fa45af93a6489fbd97db18.png" target="_blank"><img style="width: 150px" src="https://ksd-social.oss-cn-shenzhen.aliyuncs.com/notes/a5db42480b6e91fd9cf54519543d5dbd/9d4f7be5c2fa45af93a6489fbd97db18.png"></a>
                    <span>遇到问题扫码微信联系飞哥</span>
                  </div>
                  <div>
                    <n-timeline>
                      <n-timeline-item type="success" v-if="item.status >= 1" content="开始"/>
                      <n-timeline-item
                          v-if="item.status >= 2"
                          type="success"
                          title="制作中"
                          content="简历正在加急开发中..."
                          time="2018-04-03 20:46"
                      />
                      <n-timeline-item
                          v-if="item.status >= 3"
                          type="success"
                          title="已完成"
                          time="2018-04-03 20:46"
                      >
                        简历制作完成，点击下载按钮...
                        <span @click="handleDownload(item)" v-if="item.resumeNewFile && item.status == 3" class="ml5 red pointer"
                                  type="info">下载简历
                        </span>
                      </n-timeline-item>
                      <n-timeline-item
                          v-else
                          type="warning"
                          title="简历等待上传"
                          time="2018-04-03 20:46"
                      />
                      <n-timeline-item
                          type="success"
                          v-if="item.status >= 4"
                          title="已结束"
                          time="2018-04-03 20:46"
                          line-type="dashed"
                      />
                      <n-timeline-item v-else content="结束"/>
                    </n-timeline>
                  </div>
                </div>
              </td>
            </tr>
          </template>
          </tbody>
        </table>
      </div>
    </div>
    <teleport to="body">
      <k-login ref="loginRef" @success="handleLoginFinshed"></k-login>
      <ksd-resume-add ref="resumeDialogRef"></ksd-resume-add>
      <ksd-resume-pay ref="resumePayRef" @close="handleLoadRefresh"></ksd-resume-pay>
    </teleport>
  </div>
</template>
<script setup>
const tableData = ref([])
const loginRef = ref({})
const resumeDialogRef = ref({})
const resumePayRef = ref({})
const userStore = useStore.userState()

const handleUploadSucess = async (item)=>{
  await useResumeUpdateFileApi({id:item.id,rfile:item.resumeNewFile})
  item.status = 3
  useMessage().success("上传成功")
}

const handleUpdateStatus = async (item, status) => {
  try {
    await useResumeUpdateStatusApi({id: item.id, status: status})
    useMessage().success("操作成功")
    item.status = status
  } catch (e) {
    useMessage().success(e.message)
  }
}

const handleOpenPayDiaolog = async (item) => {
  await useLoginDialog()
  resumePayRef.value.handleOpen(item.id, item.price,item.title)
}


const handleLoginFinshed = async () => {
  window.location.reload()
}

const handleLoadRefresh = async () => {
  window.location.reload()
}


const handleOpenResume = async () => {
  await useLoginDialog()
  resumeDialogRef.value.handleOpen()
}

const handleLoadData = async () => {
  const resp = await useLoadResumesApi({pageNo: 1, pageSize: 100})
  tableData.value = resp.data.map((c,index)=>{
    c.expand = index == 0
    return c
  })
}

const handleDownload =  async (item)=>{
  try {
    const resp = await useLoadResumeFileDetail(item.id)
    var objectUrl = resp.data
    let a = document.createElement('a')
    a.style.display = 'none'
    a.href = objectUrl
    a.download = item.title
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    useMessage().success("下载成功！");
  }catch (e){
    if(e.code == 701){
       useLoginDialog()
    }
    useMessage().error(e.msg)
    if(e.code == 702){
      handleOpenPayDiaolog(item)
    }
  }
}


definePageMeta({
  layout: "nindex"
})

onMounted(async () => {
  if(userStore.isLogin) {
    handleLoadData()
  }
})

</script>

<style scoped lang="scss">
._land_23vdq_1 {
  display: flex;
  justify-content: center;
  width: 100%;
}


._land-container_23vdq_7 {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 80px 8%;
  max-width: 1280px;
  padding: 40px 40px 30px
}

._land-img_23vdq_14 {
  grid-column: span 7;
  max-width: 100%;
  object-fit: contain
}


._land-text_23vdq_11 {
  display: flex;
  flex-direction: column;
  grid-column: span 5;
  align-items: flex-start;
  justify-content: center
}

._land-text_23vdq_11 > section {
  font-weight: bold;
  font-size: 28px;
  color: var(--text-color-primary, var(--text-color-primary, #222529))
}

._land-text_23vdq_11 > ul {
  padding: 0;
  margin: 0;
  margin-top: 28px;
  margin-bottom: 48px;
  margin-left: 20px;
  line-height: 200%;
  list-style: disc;
  color: #666;
  font-size: 16px;
}

.gda-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
}

.gdesign-icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-size: 20px;
}

.gda-btn > i, .gda-btn > span {
  display: inline-flex;
  pointer-events: none;
  line-height: 1;
}

.k-data-table-table th {
  background: #fafafc;
}

.k-data-table-table td,
.k-data-table-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(239, 239, 245, 1);
}
</style>
